<template>
  <div>
    <el-form ref="addDtoRef" :inline="true" class="bg-bg_color w-[99/100] pl-4 pt-4">
      <el-form-item label="模块名称">
        <el-select style="width: 160px" placeholder="请选择" filterable clearable
          @change="GetModulChildrens(SubmitFrom.moduleId)" value-key="displayName" v-model="SubmitFrom.moduleId">
          <el-option v-for="item in ListFrom.ModelList" :key="item.id" :label="item.displayName" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="菜单名称">
        <el-select style="width: 160px" placeholder="请选择" filterable clearable value-key="displayName"
          v-model="SubmitFrom.menuId">
          <el-option v-for="item in ListFrom.ChildList" :key="item.id" :label="item.displayName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="题型">
        <el-select style="width: 100px" placeholder="请选择" filterable clearable v-model="SubmitFrom.questionType">
          <el-option v-for="item in ListFrom.QuestionType" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="题目">
        <el-input type="text" style="width: 160px" v-model="SubmitFrom.title" />
      </el-form-item>
      <el-form-item>
        <el-button :icon="useRenderIcon(Search)" type="primary" @click="SearchForm()">搜索</el-button>
      </el-form-item>
    </el-form>
    <PureTableBar class="h100-60" title="资源列表">
      <template #buttons>
        <p class="text-red-500 absolute left-[120px] leading-7 text-sm">注：双击查看详情</p>
        <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="handleUpdate(undefined)">
          上传
        </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" :size="size"
          :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @selection-change="handleSelectionChange" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" @cell-dblclick="handleUpdate">
          <template #operation="{ row }">
            <el-button class="reset-margin" link type="warning" :size="size" :icon="useRenderIcon(ShowFile)"
              @click="showfile(row)">
              预览
            </el-button>
            <el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(EditPen)"
              @click="handleUpdate(row)">
              修改
            </el-button>
            <el-button class="reset-margin" link type="danger" @click="handleDelete(row)" :size="size"
              :icon="useRenderIcon(Delete)">
              删除
            </el-button>
            <!-- <el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
              <template #reference>
                <el-button class="reset-margin" link type="danger" :size="size" :icon="useRenderIcon(Delete)">
                  删除
                </el-button>
              </template>
            </el-popconfirm> -->
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <el-dialog @close="HideVisible(subcheck)" v-model="updatePanelVisible" :title="VisibleTitle + '资源'" width="35%" center
      :close-on-click-modal="false">
      <el-form :rules="rules" :model="subupfrom" ref="subcheck" label-width="120px">
        <el-form-item label="模块名称" prop="moduleId">
          <el-select placeholder="请选择" filterable clearable @change="GetModulChildrenss(subupfrom.moduleId)"
            value-key="displayName" :disabled="isdisabled" v-model="subupfrom.moduleId" class="!w-[300px]">
            <el-option v-for="item in updateFrom.ModelList" :key="item.id" :label="item.displayName" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuId">
          <el-select placeholder="请选择" filterable clearable value-key="displayName" :disabled="isdisabled"
            v-model="subupfrom.menuId" class="!w-[300px]">
            <el-option v-for="item in updateFrom.ChildList" :key="item.id" :label="item.displayName" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="资源类型" prop="resourcetype">
          <el-select placeholder="请选择" filterable clearable v-model="subupfrom.resourcetype" class="!w-[300px]">
            <el-option v-for="item in updateFrom.QuestionType" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否展示资源" prop="isShow">
          <el-radio-group v-model="subupfrom.isShow" class="ml-4">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文件名称" prop="resourceName">
          <el-input type="text" v-model="subupfrom.resourceName" class="!w-[300px]" />
        </el-form-item>
        <el-form-item label="资源摘要" prop="resourceAbstract">
          <el-input type="text" v-model="subupfrom.resourceAbstract" class="!w-[300px]" />
        </el-form-item>
        <el-form-item label="文件上传" prop="url">
          <el-upload v-if="!isdisabled" style="width: 100%" :accept="AstrictFileType" v-model:file-list="subupfrom.url"
            :before-upload="handleBeforeUpload" :on-success="handleSuccessUpload" :limit="1" class="upload-demo"
            action="/api/Upload/FileUpload">
            <el-button type="primary">点击上传文件</el-button>
            <template #tip>
              <div class="el-upload__tip" style="line-height: 22px">
                格式:.doc(x).xls(x).ppt(x).pdf.txt.mp4.fla.flv.swf.jpg.png.jpe(g).gif.htm(l)--文件大小不可超过100M!
                <br />
              </div>
            </template>
          </el-upload>
          <el-input v-else type="text" class="!w-[300px]" :disabled="isdisabled" v-model="subupfrom.url" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="SaveTopic(subcheck)">保存</el-button>
          <el-button @click="HideVisible(subcheck)">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 预览文件内容 -->
    <el-dialog v-model="loadingfile" @close="HideFile()" class="showpdf">
      <file-view v-if="loadingfile" :type="showfiles?.fileType" :url="`${showfiles?.url
        .replace(/\\/g, '/')
        .substring(1)}`" :fileHost="showfiles?.fileHost" />
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { PureTableBar } from "@/components/RePureTableBar";
import FileView from "@/components/viewer3/index.vue"
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import AddFill from "@iconify-icons/ri/add-circle-line";
import ShowFile from "@iconify-icons/ep/view";

import { useIndex } from "./hook";
const subcheck = ref();
const {
  rules,
  dataList,
  loading,
  ListFrom,
  showfiles,
  columns,
  loadingfile,
  pagination,
  SubmitFrom,
  VisibleTitle,
  isdisabled,
  updateFrom,
  subupfrom,
  AstrictFileType,
  updatePanelVisible,
  showfile,
  HideFile,
  SaveTopic,
  HideVisible,
  SearchForm,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  GetModulChildrens,
  handleCurrentChange,
  GetModulChildrenss,
  handleSuccessUpload,
  handleSelectionChange,
  handleBeforeUpload
} = useIndex();
</script>

<style lang="scss">
.showpdf {
  width: 650px;
  height: fit-content;

  .el-dialog__body {
    height: calc(100% - 60px);
  }

  .el-dialog__body>div {
    height: 100%;
  }
}
</style>
